import React, { Component } from "react";  /* eslint-disable eqeqeq */
import { Divider, Button, message, Col, InputNumber, Row, Slider } from "antd";
import { messageSetUtil } from "../../utils/commonUtils";
import { RightOutlined } from '@ant-design/icons';
import localStorage from "localStorage";//引入
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from "../../config";
import "../home/home.less";
import { homeDeng } from "../../api/index"
import onicon from '../../static/touch/on_icon.png'
import officon from '../../static/touch/off_icon.png'
import devices from '../../static/tubiao/devices.png'
import emergency from '../../static/tubiao/emergency_power_supply.png'
import gateway from '../../static/tubiao/gateway.png'
import jiliangshebei from '../../static/tubiao/jiliangshebei.png'
import sensor from '../../static/tubiao/sensor.png'
import BrightnessArea from "./arealight/brightnessarea";
import TemperatureColorArea from "./arealight/temperatureColorarea";
import { Regular, Light, INFO_SHOW_DIALOG_SHOW, INFO_SHOW_DIALOG_HIDE, BOXSHADOW } from '../../const/infoConst'
import { showCutName } from '../../utils/stringUtils';
import {
  getlghtbygroupId, getPidImage,
  saveGroupInfor,
} from '../../utils/homeUtils';

let weiyi = 1000
let weiyi2 = 100
export default class Home extends Component {
  constructor(a) {
    super(a);
    this.state = {
      kongzhi: '01',
      services: [],
      view: "type_a",
      mm: '451',
      groupSet: '',
      deviceSet: '',
      dev: '',
      devname: '',
      disabled: true,
      //弹窗
      infoShow: 'hidden',
      //组中所有的灯的个数
      arealigehtNum: '',
    }
  }
  componentWillUnmount() {
    PubSub.unsubscribe(INFO_SHOW_DIALOG_SHOW);
    PubSub.unsubscribe(INFO_SHOW_DIALOG_HIDE);
  }
  componentDidMount() {
    meshLog('home渲染第一步',);
    const dizhilanbanben = JSON.parse(SPGet("dizhilanbanben"))
    meshLog('home.jsx,74行,dizhilanbanben', dizhilanbanben);
    if (dizhilanbanben == 9) {
      SPSet('dizhilan', JSON.stringify(0));//控制OK跳转的页面所需要的具体数据
    } else {
      SPSet('dizhilan', JSON.stringify(dizhilanbanben));//控制OK跳转的页面所需要的具体数据
    }
    messageSetUtil(message);
    //信息提示弹窗
    PubSub.subscribe(INFO_SHOW_DIALOG_SHOW, (msg, index) => {
      this.setState({
        infoShow: 'visible',
      })
    })
    PubSub.subscribe(INFO_SHOW_DIALOG_HIDE, (msg, index) => {
      this.setState({
        infoShow: 'hidden',
      })
    })
    this.homemain()

    //let groupSetx = this.props.groupSet
    PubSub.unsubscribe("homeshuaxin")
    PubSub.subscribe('homeshuaxin', (msg, data) => {
      meshLog('home.jsx,96行,刷新home界面');
      this.homemain()
      weiyi2++
    })
  }
  //刚加载home界面时也使用这个方法，刷新页面需要的方法
  homemain = () => {
    let groupSetx = JSON.parse(SPGet("groupSetx"))
    let deviceSetx = JSON.parse(SPGet("deviceSetx"))
    let groupNopandun = JSON.parse(SPGet("areaNopandun"))
    meshLog("home.jsx,105行,deviceSetx", deviceSetx);
    if (groupSetx == null || groupSetx.length == 0) {
      if (deviceSetx.length == 0) {
        this.setState({
          wushuju: 1
          //存入state中
        })
      } else {
        //其他情况
      }

    } else {
      this.setState({
        groupSetx: groupSetx
        //存入state中
      })
      //meshLog("groupSet的信息", groupSetx);
      let obj = groupSetx && groupSetx.map((item, key) => {
        return (
          item.groupId = item.groupId
        )
      })
      // meshLog("所有的组的唯一标识", obj);
      SPSet("groupId", JSON.stringify(obj));
      let deviceDevs;//每个组里面的灯的信息
      let dev = [];//每个组里有多少灯的数据
      let deviceSet //当前组的信息
      meshLog('groupSetx121', groupSetx);
      meshLog('groupSetx121', deviceSetx);
      meshLog('groupNopandun', groupNopandun);
      deviceSet = getlghtbygroupId(groupNopandun)
      meshLog('deviceSet127', deviceSet);
      for (let index = 0; index < groupSetx.length; index++) {
        //获取到当前groupId下的所有的灯
        deviceDevs = getlghtbygroupId(groupSetx[index].groupId)
        meshLog('deviceDevs128', deviceDevs);
        dev[index] = deviceDevs.length;//获取到有多少个灯（devices）
      }
      this.setState({
        groupSet: groupSetx,
        deviceSet: deviceSet,
        dev: dev
        //存入state中
      })

      //如果是切换站点和退出重新登录的时候，默认展示第一个数据，如果不是上面两种情况，则展示的是不同的组
      //按道理来说这个地方只走一遍

      let zhandengpanduan = (SPGet("zhandengpanduan"));
      if (zhandengpanduan == 0) {
        let groupSetx1 = JSON.parse(SPGet("groupSetx"))
        let item = groupSetx1[0]
        meshLog('groupSetx1[0]', JSON.parse(SPGet("areaNopandun")));
        SPSet('areaNopandun', JSON.stringify(item.groupId))
        //this.zhandeng(item)//调用切换的信息
        SPSet('zhandengpanduan', JSON.stringify(1));//控制第一次加载是home界面右边显示的数据
      } else {
        let itemNo = JSON.parse(SPGet("areaNopandun"))
        let groupSetx1 = JSON.parse(SPGet("groupSetx"))
        let item = groupSetx1.filter((item) => {
          if (item.groupId == itemNo) {
            return item
          }
        })
        meshLog('itemitemitem', item[0]);
        this.zhandeng(item[0])//调用切换的信息
      }
      // 收到area的调光调色的信息之后的反馈
      PubSub.unsubscribe("data")
      PubSub.subscribe('data', (msg, data) => {
        this.zhandeng(data)
      });

    }
  }
  congxinjiazai = (item) => {
    weiyi2++
  }
  zhandeng = async (item) => {
    meshLog("home.jsx,414行,切换组的信息", item);
    weiyi++
    SPRemove('areaNopandun');
    SPSet('areaNopandun', JSON.stringify(item.groupId))
    meshLog('item.groupId', item.groupId);
    let groupId = item.groupId;
    //查询属于这个areaNo的 device
    let deviceSet = getlghtbygroupId(groupId)
    meshLog("查询属于这个areaNo的device的灯的信息", deviceSet);
    this.setState({
      deviceDevs: deviceSet,//组中灯的
    })
  }
  showUpdate = async (item, key) => {
    //meshLog(item);
    this.zhandeng(item)

    meshLog(item);
    let groupId = item.groupId;
    const valueonff = item.groupStatus.slice(0, 2) === this.state.kongzhi ? '000A84' : '010A85';
    const groupStatusX = item.groupStatus.slice(0, 2) === this.state.kongzhi ? '00220101026406001E0600C80000' : '01220101026406001E0600C80000';
    meshLog('groupId', groupId);
    let value = '25251600006100000000000003' + '0500' + '00000000000000' + '0110' + valueonff + '5252'
    meshLog('valueonff', valueonff);
    var data = ',' + item.wangguanMac + ',' + value + ',';
    //var data = ',' + '00000000009F' + ',' + value + ',';
    //修改数据库中的数据
    let groupSetx = saveGroupInfor(item, groupStatusX)
    PubSub.publish('showUpdate', data)//控制mqtt发信息
    this.setState({
      groupSet: groupSetx,
    });
    this.congxinjiazai(item)
  }
  componentDidUpdate() {
    //smeshLog("2222222222", document.getElementById("ddd"))
    document.getElementById("xian").style.height = document.getElementById("areaheight").offsetHeight + "px";
    //将线的高度设置为home界面左边的高度，左边的高度已经在css中设置好了
    const xianvalue = document.getElementById("xian").style.height;
    const areaheightvalue = document.getElementById("areaheight").offsetHeight;
    //meshLog("areaheightvalue", areaheightvalue);
    PubSub.publish('heighting', areaheightvalue)//修改分割线的高度并把这个高度的值传到admin中，让其修改侧边的高度
    //mqtt返回的信息
    PubSub.subscribe('shuju', (msg, data) => {
      //meshLog("shujsssssssss", data);
    });
    //devlingt的信息
    PubSub.unsubscribe("huadevdev")
    PubSub.subscribe('huadevdev', (msg, data) => {
      PubSub.publish('shujudev', data)
    })
    //areadevlingt的信息开关组之后的操作
    PubSub.unsubscribe("areadev2")
    PubSub.subscribe('areadev2', (msg, data) => {
      this.congxinjiazai(data)
      this.zhandeng(data)
    })
    //declight的信息开关declihgt之后的操作
    PubSub.unsubscribe("lightdev2")
    PubSub.subscribe('lightdev2', (msg, data) => {
      weiyi++
    })

  }
  render() {
    //meshLog("...加载结束...", this.state.ungroup);
    const wushuju = this.state.wushuju
    if (wushuju == 1) {
      return (
        <div className="neirong" >
          <div className="zuo" id="areaheight">
            <h4 style={{ marginLeft: 10, marginTop: 10, fontFamily: Regular }}>GROUP</h4>
            <div style={{ width: 300, textAlign: 'center', marginTop: 200 }}>
              <h1 >No Areas Yet</h1>
            </div>
          </div>
          <Divider id="xian" dashed="true" style={{ height: 1000, backgroundColor: "#000000", fontWeight: "bold", }} orientation="right" orientationMargin={50} type="vertical" />
          <div className="zuida">
            <div className="you">
              <h4 style={{ marginLeft: 10, marginTop: 10, fontFamily: Light }} >DIVICE</h4>
              <div style={{ textAlign: 'center', marginTop: 200 }}>
                <h1 >No Light Yet</h1>
              </div>
            </div>
          </div>
        </div >
      )
    }
    else {
      return (
        <div className="neirong"  >
          <div className="zuo" id="areaheight" style={{ width: 330 }} >
            <div style={{ height: 1080, width: 30000, overflowX: 'hidden', overflowY: 'auto' }}>
              <h4 style={{ marginLeft: 10, marginTop: 10, fontFamily: Regular }}>GROUP</h4>
              <div >
                {
                  this.state.groupSet && this.state.groupSet.map((item, key, user) => {
                    if (!item.children) {
                      return (
                        <div className="zuoneirong" style={{ color: '#BEBEBE', boxShadow: BOXSHADOW, backgroundColor: item.areaNo == JSON.parse(SPGet("areaNopandun")) ? '#F1FAFF' : '' }} key={key + 23456}>
                          <div style={{ display: 'flex' }}  >
                            <div style={{ cursor: 'pointer', width: 50, marginLeft: 10, marginTop: 20 }}>
                              <div onClick={() => { this.showUpdate(item, key) }} >
                                <img style={{ display: item.groupStatus.slice(0, 2) === this.state.kongzhi ? 'block' : 'none', width: 32, height: 32, marginTop: -2, marginLeft: 4 }} src={onicon} alt="" />
                                <img style={{ display: item.groupStatus.slice(0, 2) === this.state.kongzhi ? 'none' : 'block', width: 32, height: 32, marginTop: -2, marginLeft: 4 }} src={officon} alt="" />
                              </div>
                            </div>
                            <div style={{ width: 200, marginTop: 10 }} onClick={() => { this.zhandeng(item, key) }}>
                              <div style={{ width: 160, color: '#282D32', fontFamily: Light, fontSize: 16 }} >{showCutName(item.groupName)} </div>
                              <span style={{ width: 160, color: '#7E7E7E', fontSize: 12, fontFamily: Light }}> {this.state.dev[key]} Device(s)  </span>
                            </div>
                            <div style={{ cursor: 'pointer', marginLeft: -90, marginTop: 19, height: 21, width: 100, }} onClick={() => { this.zhandeng(item, key) }} >

                            </div>
                            <div style={{ marginLeft: 0, marginTop: 20, cursor: 'pointer' }} onClick={() => { this.zhandeng(item, key) }}>
                              <RightOutlined key={key + 1} />
                            </div>
                          </div>
                          <div className="zhandengcss" onClick={() => { this.zhandeng(item, key) }}>
                          </div>
                          <div style={{ marginLeft: 10 }} >
                            <div style={{ marginTop: 0 }}>
                              <BrightnessArea element={item} key={weiyi2 + 2 + key + 90000000} />
                            </div>
                            <div style={{}} >
                              <TemperatureColorArea element={item} key={weiyi2 + 5 + key + 90000000} />
                            </div>
                          </div>
                        </div>
                      )
                    }
                    else {
                      return (
                        <span>{item.name}</span>
                      )
                    }
                  })
                }
              </div>
            </div>
          </div>
          <Divider id="xian" dashed="true" style={{ height: 1000, backgroundColor: "#000000", fontWeight: "bold", marginLeft: 20 }} orientation="right" orientationMargin={50} type="vertical" />
          <div className="zuida">
            <div style={{ height: 1080, width: 100080, overflowX: 'hidden', overflowY: 'auto' }}>
              <div className="you" style={{ height: 1080, width: 1080, }}>
                <h4 style={{ marginLeft: 10, marginTop: 10, fontFamily: Light }} >DIVICE</h4>
                <div style={{ marginTop: -15 }}>
                  {
                    this.state.deviceDevs && this.state.deviceDevs.map((element, key) => {
                      if (!element.children) {
                        return (
                          <div className="youneirong" style={{ boxShadow: BOXSHADOW, }} key={key + 45678}>
                            <div style={{ display: 'flex' }}  >
                              <div style={{ width: 50, marginLeft: 10, marginTop: 20, cursor: 'pointer', }}>
                                <div style={{ pointerEvents: element.isOnline === '00' ? 'none' : 'block', backgroundImage: { officon } }} onClick={() => { this.showoneUpdate(element, key) }} >
                                  <img alt="" style={{ display: element.pid == "1001" ? 'block' : 'none', width: 32, height: 32, marginTop: -2, marginLeft: 4 }} src={sensor} />
                                  <img alt="" style={{ display: element.pid == "1002" ? 'block' : 'none', width: 32, height: 32, marginTop: -2, marginLeft: 4 }} src={jiliangshebei} />
                                  <img alt="" style={{ display: element.pid == "1003" ? 'block' : 'none', width: 32, height: 32, marginTop: -2, marginLeft: 4 }} src={emergency} />
                                  <img alt="" style={{ display: element.pid == "1004" ? 'block' : 'none', width: 32, height: 32, marginTop: -2, marginLeft: 4 }} src={gateway} />
                                  <img alt="" style={{ display: getPidImage(element.pid) == "1005" ? 'block' : 'none', width: 32, height: 32, marginTop: -2, marginLeft: 4 }} src={devices} />
                                </div>
                              </div>
                              <div style={{ width: 250, marginTop: 10 }}>
                                <h1 style={{ marginTop: 12, fontSize: 16, color: '#282D32', fontFamily: Light }} > {element.name} </h1>
                                <h1 style={{ marginTop: 12, fontSize: 16, color: '#282D32', fontFamily: Light }} > {element.mac} </h1>
                              </div>
                              <div style={{ marginLeft: -120, marginTop: 25, height: 21, width: 100, }} >
                                {/* <img alt="" style={{ float: 'right', display: element.isOnline === '01' ? 'none' : 'block', width: 21, height: 21 }} src={errorimg} /> */}
                              </div>
                            </div>
                            <div style={{ marginLeft: 10, width: 300 }} >
                              <div style={{ marginTop: element.isdimdeng === '01' ? 20 : 0 }}>
                                {/* <Brightnessdev element={element} key={weiyi + key + 9000000000} /> */}
                              </div>
                              <div style={{ display: element.isdimdeng === '00' ? 'block' : 'none' }} >
                                {/* <TemperatureColordev element={element} key={weiyi + 1 + key + 9000000000} /> */}
                              </div>
                            </div>
                          </div>
                        )
                      }
                      else {
                        return (
                          <span>{element.name}</span>
                        )
                      }
                    })
                  }
                </div>

              </div>
            </div>
          </div>

        </div >
      );
    }
  }
}
